<!DOCTYPE html>
<html>
<head>
    <title>表单验证调试</title>
    <script src="/assets/js/require.js" data-main="/assets/js/require-backend.js"></script>
    <style>
        .debug-info { 
            background: #f5f5f5; 
            padding: 10px; 
            margin: 10px 0; 
            border-left: 4px solid #007cba; 
        }
        .error { color: red; }
        .success { color: green; }
    </style>
</head>
<body>
    <div class="container">
        <h3>表单验证调试</h3>
        
        <div id="debug-output" class="debug-info">
            <h4>调试信息：</h4>
            <div id="debug-log"></div>
        </div>
        
        <form id="test-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
            <div class="form-group">
                <label for="c-test-name" class="control-label col-xs-12 col-sm-2">测试字段:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-test-name" name="row[test_name]" type="text" class="form-control" data-rule="required" placeholder="请输入测试内容">
                </div>
            </div>
            
            <div class="form-group layer-footer">
                <label class="control-label col-xs-12 col-sm-2"></label>
                <div class="col-xs-12 col-sm-8">
                    <button type="submit" class="btn btn-success btn-embossed disabled">确定</button>
                    <button type="reset" class="btn btn-default btn-embossed">重置</button>
                </div>
            </div>
        </form>
    </div>

    <script>
        function log(message, type = 'info') {
            var debugLog = document.getElementById('debug-log');
            var className = type === 'error' ? 'error' : (type === 'success' ? 'success' : '');
            debugLog.innerHTML += '<div class="' + className + '">[' + new Date().toLocaleTimeString() + '] ' + message + '</div>';
            console.log(message);
        }

        require(['jquery', 'bootstrap', 'backend', 'form'], function ($, undefined, Backend, Form) {
            log('开始调试表单验证...');
            
            // 检查依赖
            log('jQuery版本: ' + $.fn.jquery);
            log('Form对象存在: ' + (typeof Form !== 'undefined'));
            log('Form.api存在: ' + (typeof Form.api !== 'undefined'));
            log('Form.api.bindevent存在: ' + (typeof Form.api.bindevent !== 'undefined'));
            
            // 获取表单
            var $form = $('#test-form');
            log('表单元素数量: ' + $form.length);
            log('表单data-toggle属性: ' + $form.attr('data-toggle'));
            
            // 获取提交按钮
            var $submitBtn = $form.find('[type=submit]');
            log('提交按钮数量: ' + $submitBtn.length);
            log('提交按钮初始状态 - disabled类: ' + $submitBtn.hasClass('disabled'));
            
            // 获取输入字段
            var $input = $form.find('input[data-rule]');
            log('带验证规则的输入字段数量: ' + $input.length);
            log('输入字段data-rule属性: ' + $input.attr('data-rule'));
            
            // 调用bindevent
            try {
                Form.api.bindevent($form);
                log('Form.api.bindevent 调用成功', 'success');
                
                // 检查验证器是否初始化
                setTimeout(function() {
                    log('延迟检查 - 提交按钮disabled类: ' + $submitBtn.hasClass('disabled'));
                    
                    // 检查是否有validator实例
                    var validatorData = $form.data('validator');
                    log('表单validator数据: ' + (validatorData ? '存在' : '不存在'));
                    
                }, 500);
                
                // 监听输入变化
                $input.on('input keyup change', function() {
                    var value = $(this).val();
                    log('输入变化: "' + value + '"');
                    
                    setTimeout(function() {
                        log('输入后按钮状态 - disabled类: ' + $submitBtn.hasClass('disabled'));
                        
                        // 手动触发验证
                        $form.trigger('validate');
                        
                        setTimeout(function() {
                            log('手动验证后按钮状态 - disabled类: ' + $submitBtn.hasClass('disabled'));
                        }, 100);
                    }, 100);
                });
                
                // 监听表单验证事件
                $form.on('valid.form', function() {
                    log('表单验证通过事件触发', 'success');
                });
                
                $form.on('invalid.form', function() {
                    log('表单验证失败事件触发', 'error');
                });
                
            } catch (e) {
                log('Form.api.bindevent 调用失败: ' + e.message, 'error');
            }
        });
    </script>
</body>
</html>